<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>统计分析</title>
		<link rel="stylesheet" href="common/layui/css/layui.css" />
		<script src="common/layui/layui.js"></script>
		<script src="common/echarts/echarts-5.4.3/dist/echarts.min.js"></script>
		<script src="common/echarts/jquery-3.7.1.min.js"></script>
	</head>
	<body>
		<!-- <table id="myData" class="layui-hide" lay-filter="myData"></table> -->
		<div style="width: 90%;margin: 0 auto 0.7 auto;">
			<div id="myEchart1" style="height: 500px;"></div>
		</div>
		<div style="width: 90%;margin: 0 auto 0.7 auto;">
			<div id="myEchart2" style="height: 500px;"></div>
		</div>
		<div style="width: 90%;margin: 0 auto 0.7 auto;">
			<div id="myEchart3" style="height: 500px;"></div>
		</div>
	</body>
	<script>
		// layui.use('table', function() {
		// 	var table = layui.table;
		// 	table.render({
		// 		elem: "#myData",
		// 		url: "http://localhost:8080/getTalk_sumAll?aname=string&count=0",
		// 		text: {
		// 			none: '加载数据...'
		// 		},
		// 		cellMinWidth: 80,
		// 		cols: [
		// 			[{
		// 					field: "aname",
		// 					title: "作家名字",
		// 					fixed: "left"
		// 				},
		// 				{
		// 					field: "count",
		// 					title: "评论数"
		// 				}
		// 			]
		// 		],
		// 		parseData: function(rs) {
		// 			console.log("获取返回加载到列表的数据");
		// 			console.log(rs);
		// 			return rs;
		// 		}
		// 	})
		// });

		var dom1 = document.getElementById("myEchart1");
		var mychart1 = echarts.init(dom1);
		let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
		let data1 = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
		let yMax = 500;
		let dataShadow = [];
		for (let i = 0; i < data1.length; i++) {
			dataShadow.push(yMax);
		}
		option = {
			title: {
				text: '统计总讨论数最多的作者'
			},
			xAxis: {
				data: dataAxis,
				axisLabel: {
					inside: true,
					color: '#005500'
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				z: 10
			},
			yAxis: {
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					color: '#999'
				}
			},
			dataZoom: [{
				type: 'inside'
			}],
			series: [{
				type: 'bar',
				showBackground: true,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#83bff6'
						},
						{
							offset: 0.5,
							color: '#188df0'
						},
						{
							offset: 1,
							color: '#188df0'
						}
					])
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#2378f7'
							},
							{
								offset: 0.7,
								color: '#2378f7'
							},
							{
								offset: 1,
								color: '#83bff6'
							}
						])
					}
				},
				data: data1
			}]
		};
		// Enable data zoom when user click bar.
		const zoomSize = 6;
		mychart1.on('click', function(params) {
			console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
			mychart1.dispatchAction({
				type: 'dataZoom',
				startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
				endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
			});
		});

		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getTalk_sumSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				data1 = [];
				dataAxis = [];
				for (var i = 0; i < data.length; i++) {
					data1.push(data[i].value);
					dataAxis.push(data[i].name);
				}
				console.log(data1);
				console.log(dataAxis);

				mychart1.hideLoading();
				mychart1.setOption({
					xAxis: {
						data: dataAxis
					},
					series: [{
						data: data1
					}]
				});
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart1.hideLoading();
			}
		})

		if (option && typeof option === "object") {
			console.log("统计图显示");
			mychart1.setOption(option, true);
		}

		var dom2 = document.getElementById("myEchart2");
		var mychart2 = echarts.init(dom2);
		var auther_name=['a', 'b', 'c', 'd']
		var bar_data=[2, 1.2, 2.4, 3.6]
		option = {
		  title: [
		    {
		      text: '统计平均评分前20的作者'
		    }
		  ],
		  polar: {
		    radius: [30, '90%']
		  },
		  angleAxis: {
		    max: 10,
		    startAngle: 75
		  },
		  radiusAxis: {
		    type: 'category',
		    data: auther_name
		  },
		  tooltip: {},
		  series: {
		    type: 'bar',
		    data: bar_data,
		    coordinateSystem: 'polar',
		    label: {
		      show: true,
		      position: 'middle',
		      formatter: '{b}: {c}'
		    }
		  }
		};

		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getGrade_meanSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				bar_data=[];
				auther_name=[];
				for (var i = 0; i < data.length; i++) {
					bar_data.push(data[i].grade);
					auther_name.push(data[i].aname);
				}
				console.log(bar_data);
				console.log(auther_name);

				mychart2.hideLoading();
				mychart2.setOption({
					radiusAxis: {
					  data: auther_name
					},
					series: {
					  data: bar_data
					  }
				});
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart2.hideLoading();
			}
		})

		if (option && typeof option === "object") {
			console.log("统计图显示");
			mychart2.setOption(option, true);
		}

		var dom3 = document.getElementById("myEchart3");
		var mychart3 = echarts.init(dom3);
		var data1_list = [220, 182, 191, 234, 290, 330, 310];
		var data2_list = [220, 182, 191, 234, 290, 330, 310];
		var data3_list = [150, 232, 201, 154, 190, 330, 410];
		var data4_list = [320, 332, 301, 334, 390, 330, 320];
		option = {
			title: {
				text: '统计每年各分类图书的讨论数变化'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['文学', '小说', '诗歌', '散文']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011',
					'2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023',
					'2024'
				]
			},
			yAxis: {
				type: 'value'
			},
			series: [{
					name: '文学',
					type: 'line',
					// stack: 'Total',
					data: data1_list
				},
				{
					name: '小说',
					type: 'line',
					// stack: 'Total',
					data: data2_list
				},
				{
					name: '散文',
					type: 'line',
					// stack: 'Total',
					data: data3_list
				},
				{
					name: '诗歌',
					type: 'line',
					// stack: 'Total',
					data: data4_list
				}
			]
		};
		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getLiterature_countsSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				data1_list = [];
				for (var i = 0; i < data.length; i++) {
					data1_list.push(data[i].num)
				}
				console.log(data1_list);

				mychart3.hideLoading();
				mychart3.setOption({
					series: [{
						name: '文学',
						data: data1_list
					}]
				})
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart3.hideLoading();
			}
		})
		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getNovel_countsSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				data2_list = [];
				for (var i = 0; i < data.length; i++) {
					data2_list.push(data[i].num)
				}
				console.log(data2_list);
		
				mychart3.hideLoading();
				mychart3.setOption({
					series: [{
						name: '小说',
						data: data2_list
					}]
				})
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart3.hideLoading();
			}
		})
		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getProse_countsSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				data3_list = [];
				for (var i = 0; i < data.length; i++) {
					data3_list.push(data[i].num)
				}
				console.log(data3_list);
		
				mychart3.hideLoading();
				mychart3.setOption({
					series: [{
						name: '散文',
						data: data3_list
					}]
				})
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart3.hideLoading();
			}
		})
		$.ajax({
			type: "get",
			async: "true",
			url: "http://localhost:8080/getPoetry_countsSelect",
			dataType: "json",
			success: function(data) {
				console.log("获取接口数据");
				console.log(data);
				data4_list = [];
				for (var i = 0; i < data.length; i++) {
					data4_list.push(data[i].num)
				}
				console.log(data3_list);
		
				mychart3.hideLoading();
				mychart3.setOption({
					series: [{
						name: '诗歌',
						data: data4_list
					}]
				})
			},
			error: function(error) {
				console.log("接口数据有问题");
				console.log(error);
				mychart3.hideLoading();
			}
		})
		if (option && typeof option === "object") {
			console.log("统计图显示");
			mychart3.setOption(option, true);
		}
	</script>
</html>